<template>
    <div class="header-container">
        <!-- 缩放按钮 -->
        <div class="collapse_btn_div" @click="handleCollapse"><i :class="handleClass()"></i></div>
        <!-- 中间区域 -->
        <div class="middle_div">
            <el-tooltip content="打赏" placement="top">
                <a @click="open" href="#"><i class="el-icon-star-off"></i></a>
            </el-tooltip>
            <el-tooltip content="博客" placement="top">
                <a href="https://www.lvcoding.com" target="_blank"><i class="el-icon-reading"></i></a>
            </el-tooltip>
            <el-tooltip content="Gitee码云" placement="bottom">
                <a href="https://gitee.com/wuyanshen/cup" target="_blank"><i class="el-icon-medal-1"></i></a>
            </el-tooltip>
        </div>
        <!-- 头像 -->
        <div class="avatar">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <el-avatar v-if="avatarUrl" :size="50" :src="avatarUrl"></el-avatar>
                    <el-avatar v-if="!avatarUrl" :size="50" icon="el-icon-user-solid"></el-avatar>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="info">个人信息</el-dropdown-item>
                    <el-dropdown-item command="preUpdatePwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="signout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!-- 修改密码对话框 -->
        <el-dialog title="修改密码" :visible.sync="pwdDialog" width="30%" :show-close="false" @close="pwdClose">
            <el-form label-width="100px" ref="pwdForm" :rules="pwdRules" size="mini" :model="pwdForm">
                <el-form-item label="原密码" prop="old_password">
                    <el-input type="password" v-model="pwdForm.old_password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="new_password">
                    <el-input type="password" v-model="pwdForm.new_password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="re_password">
                    <el-input type="password" v-model="pwdForm.re_password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="pwdDialog = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleUpdatePwd('pwdForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 二维码显示 -->
        <el-dialog class="qrcode_dialog" title="" :visible.sync="qrCodeDialog" width="15%" >
            <img src="../assets/images/dashang.jpg" width="200px" height="200px"/>
        </el-dialog>
    </div>
</template>
<script>
    import {
        mapState,
        mapActions,
        mapMutations
    } from "vuex";

    export default {
        data() {
            var validateRePassword = (rule, value, callback) => {
                if (value !== this.pwdForm.new_password) {
                    callback(new Error("两次输入的密码不一致"));
                } else {
                    callback();
                }
            };
            var checkPassword = async (rule, value, callback) => {
                let res = await this.pwdCheck({
                    password: value
                });
                if (res.code !== 0) {
                    callback(new Error("原密码不正确"));
                } else {
                    callback();
                }
            };
            return {
                qrCodeDialog: false,
                avatarUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                pwdDialog: false,
                pwdForm: {
                    old_password: "",
                    new_password: "",
                    re_password: ""
                },
                pwdRules: {
                    old_password: [{
                            required: true,
                            message: "原密码不能为空",
                            trigger: "blur"
                        },
                        {
                            validator: checkPassword,
                            message: "原密码错误",
                            trigger: "blur"
                        }
                    ],
                    new_password: [{
                            required: true,
                            message: "新密码不能为空",
                            trigger: "blur"
                        },
                        {
                            min: 6,
                            message: "密码至少6位",
                            trigger: "blur"
                        }
                    ],
                    re_password: [{
                            required: true,
                            message: "确认密码不能为空",
                            trigger: "blur"
                        },
                        {
                            validator: validateRePassword,
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        computed: {
            ...mapState(["siderCollapse"]),
            ...mapState({
                username: state => state.user.username
            })
        },
        methods: {
            ...mapActions("user", ["updatePwd", "userInfo", "pwdCheck", "logout"]),
            ...mapActions("tabs", ["addTab"]),
            ...mapMutations(["UPDATE_COLLAPSE"]),
            ...mapMutations("tabs", ["initMainTabs", "setActiveRoute"]),
            handleCommand(command) {
                this[command]();
            },
            //点击修改密码按钮 弹出dialog
            preUpdatePwd() {
                this.pwdDialog = true;
            },
            //提交密码修改
            handleUpdatePwd(formName) {
                this.$refs[formName].validate(async valid => {
                    if (!valid) {
                        return false;
                    } else {
                        //获取当前登录用户信息
                        let {
                            data: {
                                id
                            }
                        } = await this.userInfo();
                        let password = this.pwdForm.new_password;
                        console.log(password)
                        //更新密码
                        let res = await this.updatePwd({
                            id,
                            password
                        });
                        if (res.code === 0) {
                            this.$message.success("密码修改成功");
                        }
                        this.pwdDialog = false;
                    }
                });
            },
            //关闭修改密码dialog后清空提示和数据
            pwdClose() {
                this.$refs["pwdForm"].resetFields();
                this.pwdForm = {};
            },
            //展示用户信息方法
            info() {
                this.addTab('/info')
                this.setActiveRoute('/info')
                this.$router.push({
                    name: "Info"
                }).catch(err => {
                    err
                });
            },
            signout() {
                this.$confirm("此操作将退出系统, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(async () => {
                        const res = await this.logout()
                        if(res.code === 0){
                            window.sessionStorage.clear();
                            this.$router.push("/login").catch(err => {
                                err
                            });
                            this.initMainTabs()
                            this.$message({
                                type: "success",
                                message: "退出成功!"
                            });
                        }

                    })
                    .catch(() => {});
            },
            handleCollapse() {
                this.UPDATE_COLLAPSE(!this.siderCollapse);
            },
            handleClass() {
                return {
                    "el-icon-s-fold": !this.siderCollapse,
                    "el-icon-s-unfold": this.siderCollapse
                }
            },
            open() {
                this.qrCodeDialog = true
            }
        }
    };
</script>
<style lang="less" scoped>
    .header-container {
        display: flex;
        justify-content: space-between;

        //左边缩放按钮
        .collapse_btn_div {
            font-size: 25px;

            i:hover {
                cursor: pointer;
            }
        }

        //中间区域
        .middle_div {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            a {
                color: white;
            }

            i {
                margin-top: 15px;
                margin-right: 20px;
                font-size: 30px;
            }
        }

        //二维码图片dialog
        .qrcode_dialog{
            img{
                margin-left: 6px;
            }
        }


        // 右边的头像
        .avatar {
            height: 60px;
            display: flex;
            align-items: center;

            .el-dropdown {
                height: 50px;
            }

            img {
                margin-top: 10px;
            }
        }
    }
</style>
